<template>
  <div>
      <h3>基础用法</h3>
      <p>提示弹出提示的用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-button @click='showToast' >点我</g-button>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>提示弹窗的位置</h3>
      <p>通过向方法传递一个位置的信息参数</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-button @click='showToast1'>点我</g-button>
          <g-button @click='showToast2' >点我</g-button>
         
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr1}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(1)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[1] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[1] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>

      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gButton from "../../../src/Button.vue";
import mixin from "../mixin";
import Icon from "../../../src/Icon.vue";
import plugin from "../../../src/plugin";
Vue.use(plugin);
export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      loading1: true,
      codeStr: `
      <template>
      <g-button @click='showToast' >点我</g-button>
      </template>
      import plugin from "../../../src/plugin";
      Vue.use(plugin);
      \<script>
      methods: {
    showToast1() {
      this.showToast("middle");
    },
    showToast2() {
      this.showToast("bottom");
    },
    showToast(position) {
      this.$toast("你的支付宝有一笔转账待查收", {
        position,
        closeButton: {
          text: "关闭",
          callback(toast) {
            console.log(toast.log());
          },
        },
      });
    }
      \<\/script>
          `
        .replace(/^\s*/gm, "")
        .trim(),
      codeStr1: `<g-button @click='showToast1'>点我</g-button>
          <g-button @click='showToast2' >点我</g-button>`
        .replace(/^\s*/gm, "")
        .trim(),
    };
  },
  components: {
    "g-button": gButton,
    "g-icon": Icon,
  },

  methods: {
    showToast1() {
      this.showToast("middle");
    },
    showToast2() {
      this.showToast("bottom");
    },
    showToast(position) {
      this.$toast("你的支付宝有一笔转账待查收", {
        position,
        closeButton: {
          text: "关闭",
          callback(toast) {
            console.log(toast.log());
          },
        },
      });
    },
    showOneLineCode() {
      this.oneLineMainCodeVisible = !this.oneLineMainCodeVisible;
      if (this.oneLineLabel === "显示代码") {
        this.oneLineLabel = "隐藏代码";
      } else this.oneLineLabel = "显示代码";
    },
  },
};
</script>

<style lang="scss" scoped>
.icon {
  color: #409eff;
}
</style>